<template>
<f7-page name="detail" class="page-detail" toolbar-fixed>
  <f7-navbar>
    <f7-nav-left :back-link="true">
      <f7-link icon-f7="add"></f7-link>
      <f7-link icon-f7="more_round"></f7-link>
      <f7-link icon-f7="share"></f7-link>
    </f7-nav-left>
  </f7-navbar>

  <template v-if="good != null">
    <f7-swiper v-if="good.Gimg_path.length > 1" pagination>
      <f7-swiper-slide v-for="img_path in good.Gimg_path.substring(0, good.Gimg_path.length - 1).split(',')" :key="img_path">
        <img class="good-img" :src="img_path" :alt="good.Gname">
      </f7-swiper-slide>
    </f7-swiper>
    <div class="tit">{{good.Gname}}</div>
    <div class="subtit">{{good.Gstyle}}-{{good.Gdetails}}</div>
    <div class="subtit color-orange">¥{{good.Currprice}} 库存{{good.Gsale_vol}}</div>
    <f7-list class="list-sel">
      <f7-list-item smart-select smart-select-back-on-select title="选择颜色" smart-select-back-text="返回" :after="color">
        <select v-model="color">
          <option v-for="sku_color in good.Gsku_color.split(',')" :value="sku_color">{{sku_color}}</option>
        </select>
      </f7-list-item>
      <f7-list-item smart-select smart-select-back-on-select title="选择尺码" smart-select-back-text="返回" :after="size">
        <select v-model="size">
          <option v-for="sku_size in good.Gsku_size.split(',')" :value="sku_size">{{sku_size}}</option>
        </select>
      </f7-list-item>
    </f7-list>
  </template>
  <f7-toolbar>
    <f7-link icon-f7="heart" @click.native="like">&nbsp;喜欢</f7-link>
    <f7-button fill big @click.native="buy">立即购买</f7-button>
  </f7-toolbar>
</f7-page>
</template>

<script>
export default {
  name: 'detail',
  data() {
    return {
      good: null,
      color: null,
      size: null
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      const { id } = this.$route.params
      $.fetch('gdetail', { id }).then(data => {
        this.good = data
      })
    },
    like() {
      const { Id } = this.good
      let likes = f7.formGetData('shop.like')
      likes = likes ? Object.assign(likes, { [Id]: { Id }}) : { [Id]: { Id }}
      f7.formStoreData('shop.like', likes)
      toast.show('喜欢OK')
    },
    buy() {
      const { Id } = this.good
      this.$router.loadPage(`/order/${Id}/`)
    }
  }
}
</script>

<style lang="scss">
.page-detail {
  background-color: #fff;

  .good-img {
    max-width: 100%;
  }

  .tit {
    font-size: 16px;
    padding: 5px 15px 0;
  }

  .subtit {
    padding: 5px 15px 0;
  }

  .list-sel {
    margin: 10px 0;
  }
}
</style>
